<template>
  <div class="list">
    <div class="list_breadcrumb">
      <span>首页 </span>
      <span>> </span>
      <span>母婴专区</span>
    </div>
    <div class="classify">
      <dl class="classi">
        <dt>分类 ：</dt>
        <dd><router-link :to="{path:'/list',query:{classi:'mu_all',page:1}}">母婴专区</router-link ></dd>
        <dd><router-link :to="{path:'/list',query:{classi:'bao_all',page:1}}">食品保健</router-link ></dd>
        <dd><router-link :to="{path:'/list',query:{classi:'mei_all',page:1}}">美妆个护</router-link ></dd>
        <dd><router-link :to="{path:'/list',query:{classi:'shi_all',page:1}}">时尚轻奢</router-link ></dd>
      </dl>
      <!-- 母婴专区的小分类 -->
      <dl class="brand" v-if="classi=='mu_all'">
        <dt>品牌 ：</dt>
        <div style="display:flex">
          <dd><span @click="classibrand('澳爱',1)">澳爱</span></dd>
          <dd><span @click="classibrand('牛栏',1)">牛栏</span></dd>
          <dd><span @click="classibrand('雀巢',1)">雀巢</span></dd>
          <dd><span @click="classibrand('颖睿',1)">颖睿</span></dd>
          <dd><span @click="classibrand('德爱',1)">德爱</span></dd>
          <dd><span @click="classibrand('喜宝',1)">喜宝</span></dd>
          <dd><span @click="classibrand('美赞臣',1)">美赞臣</span></dd>
        </div>
      </dl>
      <!-- 食品保健的小分类 -->
      <dl class="brand" v-else-if="classi=='bao_all'">
        <dt>品牌 ：</dt>
        <div style="display:flex">
          <dd><span @click="classibrand('bio',1)">bio</span></dd>
          <dd><span @click="classibrand('Swisse',1)">Swisse</span></dd>
          <dd><span @click="classibrand('Ostelin',1)">Ostelin</span></dd>
          <dd><span @click="classibrand('Ddrops',1)">Ddrops</span></dd>
          <dd><span @click="classibrand('Blackmores',1)">Blackmores</span></dd>
        </div>
      </dl>
      <!--美妆个护的小分类 -->
      <dl class="brand" v-else-if="classi=='mei_all'">
        <dt>品牌 ：</dt>
        <div style="display:flex">
          <dd><span @click="classibrand('赫莲娜',1)">赫莲娜</span></dd>
          <dd><span @click="classibrand('CPB',1)">CPB</span></dd>
          <dd><span @click="classibrand('蒂佳婷',1)">蒂佳婷</span></dd>
          <dd><span @click="classibrand('韩后',1)">韩后</span></dd>
          <dd><span @click="classibrand('兰蔻',1)">兰蔻</span></dd>
        </div>
      </dl>
      <!-- 时尚轻奢的小分类 -->
      <dl class="brand" v-else-if="classi=='shi_all'">
        <dt>品牌 ：</dt>
        <div style="display:flex">
          <dd><span @click="classibrand('阿玛尼',1)">阿玛尼</span></dd>
          <dd><span @click="classibrand('DW',1)">DW</span></dd>
          <dd><span @click="classibrand('KEITH',1)">KEITH</span></dd>
        </div>
      </dl>

      <dl>
        <dt>贸易类型 ：</dt>
        <dd class="trade"><router-link to="#">一般贸易</router-link></dd>
        <dd><router-link to="#">海外直销</router-link></dd>
      </dl>
    </div>
    <div class="sales">
      <div class=""><router-link to="#">销量</router-link></div>
      <div class=""><router-link to="#">价格</router-link></div>
      <div class=""><router-link to="#">上架时间</router-link></div>
    </div>

    <div class="list_content">
      <!-- 循环list数组获取每个商品信息,进行页面渲染 -->
      <div class="con1" v-for="p of list" :key="p.pid">
        <div class="img1">
          <router-link :to="`/details/${p.pid}`"><img :src="p.img_lg"></router-link>
        </div>
        <div class="haiwai1">海外直销</div>
        <div class="price1">
          <div>¥ {{Number(p.price*0.8).toFixed(2)}}</div>
          <div>已售出 666件</div>
        </div>
        <div class="title1">{{p.title1}}</div>
      </div>
      
      <div class="con1 con12">
        <div class="img2"><img src="/img/list/next1.png"></div>
      </div>
      <div class="page-bar">
        <ul>
          <li class="pageLi" v-if="i>1"><span>上一页</span></li>
          <li class="pageLi" v-for="i of pagecount" :key="i" @click="getPage(i)">{{i}}</li>
          <li class="pageLi" >下一页</li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      i: 1,         //当前页码
      list:[],      //商品数组
      keyword:'',   //url搜索关键字
      pagecount:'', //服务器获取的商品总页码
      classi:'',    //url分类关键字
    }
  },

  methods:{   
    classilist(classi,i){
      this.axios.get("/ub/classlist",{params:{classi:classi,i:i}}).then((result)=>{
        console.log(result)
        this.list=result.data
      })
    },
    classibrand(brand,i){
      this.axios.get("/ub/classlist",{params:{brand:brand,i:i}}).then((result)=>{
        console.log(result)
        this.list=result.data
      })
    },
    getPage(i){
    // let url=document.location.toString()
      if(this.$route.query.keyword){
        this.$router.push(`/list?keyword=${this.$route.query.keyword}&page=${i}`)
      }else{
        this.$router.push(`/list?classi=${this.$route.query.classi}&page=${i}`)
      }
    },

    asearch(){
      this.keyword = this.$route.query.keyword;
      let i = this.$route.query.page;
      this.axios.get('/ub/search',{params:{keyword:this.keyword,i:i}}).then((res)=>{
        console.log(res)
        if(res.data.result.length>0){
          this.list = res.data.result
          this.pagecount = res.data.pagecount
          console.log(this.list)
        }else{
          alert(`抱歉!没有查询到与: ${this.keyword} 相关的商品`)
        }
      })
    },
    fenlei(){
      this.classi = this.$route.query.classi;
      let i = this.$route.query.page;
      this.axios.get('/ub/list',{params:{classi:this.classi,i:i}}).then((res)=>{
        console.log(res)
        this.list = res.data.result
        this.pagecount = res.data.pagecount
      })
    },
    send(){
      if(this.$route.query.keyword){
        this.asearch();
      }else{
        this.fenlei();
      }
    }
  },
  mounted(){
    this.send()

  }
}
</script>

<style scoped>
.list .page-bar{
  width: 1200px;
  height: 21px;
  padding: 10px 0;
}
.list .page-bar ul{
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
}
.list .pageLi{
  margin-left: 8px;
  padding: 7px 11px;
  border: 1px solid #eee;
  cursor: pointer;
  border-radius: 2px;
} 
.list .pageLi:hover{
  border-color: #666;
}

.list .classi span{
  color: #666;
  margin-left: 25px;
  cursor: pointer;
}
.list .classi span:hover{
  color: #E73736;
}
.list{
  width: 1200px;
  margin: 0 auto;
  font-size: 13px;
}
.list .list_breadcrumb{
  text-align: left;
  padding: 10px 0;
  color: #666;
}
.list .list_breadcrumb>span:nth-child(2){
  color: #bbb;
}
.list .classify{
  text-align: left;
}
.list .classify .brand dd{
  cursor: pointer;
}
.list .classify dl{
  color: #999;
  display: flex;
  padding: 10px 0 10px 20px;
}
.list .classify dl dd a,.list .classify .brand dd{
  color: #666;
  margin-left: 25px;
}
.list .classify dl dd a:hover,.list .classify .brand dd:hover{
  color: #c3625d;
}
.list .classify .trade{
  margin-left: -25px;
}
.list .sales{
  display: flex;
  font-size: 16px;
  padding: 10px 0 10px 20px;
}
.list .sales div{
  margin-right: 25px;
}
.list .sales a{  color: #666; }
.list .sales a:hover{ color: #E73736; }
.list .list_content{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.list .list_content .con1{
  width: 262px;
  height: 360px;  
  overflow: hidden;
  border: 1px solid #fff;
  margin-bottom: 10px;
  padding: 5px 10px;
  position: relative;
}
.list .list_content .con12{
  height: 344px;
}
.list .list_content .con1:hover{
  border: 1px solid #eee;
  box-shadow: 0 0 6px 2px #eee;
}
.list .list_content .con1 .img1{
  width: 260px;
  height: 260px;
  overflow: hidden;
}
.list .list_content .con1 .img1 img:hover{
  transform: scale(1.1);
  overflow: hidden;

}
.list .list_content .con1 .img1 img{
  width: 100%;
  transition: 1S;
}
.list .list_content .con1 .haiwai1{
  text-align: right;
  color: #36e754;
  position: relative;
}
.list .list_content .con1 .price1{
  color: #E73736;
  font-size: 20px;
  text-align: left;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.list .list_content .con1 .price1>div:last-child{
  color: #646464;
  font-size: 12px;
  line-height: 20px;
}
.list .list_content .con1 .title1{
  font-size: 16px;
  color: #666;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}
.list_content .con1 .haiwai1,.list .list_content .con1 .price1,.list .list_content .con1 .title1{
  padding: 0 5px;
}







</style>